{extend name="extra@index/base" /}
{block name="title"}配送员面板{/block}

{block name="css"}
{/block}


{block name='page'}
<!-- 页面开始 -->


<style>/**页面css写在这里*/
.content-block {
    margin: 0;
    padding: 0;
    color: #6d6d72;
}

.title {
    text-align: center;
    top: 0;
    color: #fff;
}

body, .native-scroll {
    overflow-x: hidden;
}

.popup-overlay {
    z-index: 0;
}
</style>
<header class="bar bar-nav" style="color: white;background: #0099FF">
    <span class="icon icon-left" onclick="$.router.back()"></span>
    <h1 class='title'>配送员面板</h1>
</header>
<div class="content" id="vue">


    <div class="content">
        <div class="buttons-tab">
            <a href="#tab1" class="tab-link active button" @click="loadList(3)">可接单</a>
            <a href="#tab2" class="tab-link button" @click="loadList(4)">配送中</a>
            <a href="#tab3" class="tab-link button" @click="loadList(5)">已完成</a>
        </div>
        <div class="content-block">
            <div class="tabs">
                <div id="tab1" class="tab active">
                    <div class="content-block">


                        <div class="card" v-for="li in list_3">
                            <div class="card-header">{{li.Status}}
                                <span>RMB {{li.cost}}元</span></div>
                            <div class="card-content">
                                <div class="list-block media-list">
                                    <ul>
                                        <li class="item-content">
                                            <div class="item-media">
                                                <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
                                                     width="44">
                                            </div>
                                            <div class="item-inner">
                                                <div class="item-title-row">
                                                    <div class="item-title">{{li.Name}}</div>
                                                </div>
                                                <div class="item-subtitle">{{li.Ad}}</div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card-footer">
                                <span>{{li.CreateTime}}</span>

                                <span><a href="#" class="button button-fill button-success"
                                         @click="path(li.from_loc,li.to_loc)">
                                    <i class="iconfont icon-daohang"></i> 导航</a></span>
                                <span><a href="#" class="button button-fill" @click="doit(li.Id)">抢单!</a></span>
                            </div>
                        </div>


                    </div>


                </div>
                <div id="tab2" class="tab">
                    <div class="content-block">


                        <div class="card" v-for="li in list_4">
                            <div class="card-header">{{li.Status}}
                                <span>RMB {{li.cost}}元</span></div>
                            <div class="card-content">
                                <div class="list-block media-list">
                                    <ul>
                                        <li class="item-content">
                                            <div class="item-media">
                                                <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
                                                     width="44">
                                            </div>
                                            <div class="item-inner">
                                                <div class="item-title-row">
                                                    <div class="item-title">{{li.Name}}</div>
                                                </div>
                                                <div class="item-subtitle">{{li.Ad}}</div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card-footer">
                                <span>{{li.CreateTime}}</span>

                                <span><a href="#" class="button button-fill button-success"
                                         @click="path(li.from_loc,li.to_loc)">
                                    <i class="iconfont icon-daohang"></i> 导航</a></span>
                                <span><a href="#" class="button button-fill" @click="songdao(li.Id)">确认送到</a></span>
                            </div>
                        </div>


                    </div>
                </div>
                <div id="tab3" class="tab">
                    <div class="content-block">


                        <div class="card" v-for="li in list_5">
                            <div class="card-header">{{li.Status}}
                                <span>RMB {{li.cost}}元</span></div>
                            <div class="card-content">
                                <div class="list-block media-list">
                                    <ul>
                                        <li class="item-content">
                                            <div class="item-media">
                                                <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
                                                     width="44">
                                            </div>
                                            <div class="item-inner">
                                                <div class="item-title-row">
                                                    <div class="item-title">{{li.Name}}</div>
                                                </div>
                                                <div class="item-subtitle">{{li.Ad}}</div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card-footer">
                                <span>{{li.CreateTime}}</span>

                                <span><a href="#" class="button button-fill" @click="doit(li.Id)">详细</a></span>
                            </div>
                        </div>


                    </div>
                </div>

            </div>
        </div>
    </div>


</div>

<!-- About Popup -->


<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<style type="text/css">
    #panel {
        position: fixed;
        background-color: white;
        max-height: 25%;
        overflow-y: auto;
        bottom: 10px;
        right: 5px;
        width: 80%;
    }

    #container {
        top: 48px;;
    }

    .head-bar {
        height: 48px;
        line-height: 48px;
        background: #4cd964;
        color: #fff;
        text-align: center;
    }

    .cls {
        position: absolute;
        right: 15px;
        color: #fff;
        border: 1px solid;
        line-height: 24px;
        margin: 12px 0;
        padding: 0 5px;
        border-radius: 5px;
    }

    .cls-p {

        position: absolute;
        left: 15px;
        color: #fff;
    }
</style>

<div class="popup popup-path">
    <div class="content-block">
        <div class="head-bar close-popup" @click="alert()">
            导航 <a href="#" class="cls">关闭</a>
        </div>


        <div id="path-map"></div>


        <script type="text/javascript"
                src="http://webapi.amap.com/maps?v=1.3&key=671e6c5aa22e0b87471cb0487e39f36d&plugin=AMap.Riding"></script>


        <div id="container"></div>
        <div id="panel"></div>


    </div>
</div>


<script>


    var vm = new Vue({
        el: "#vue",
        data: function () {
            return {
                list_3: [],
                list_4: [],
                list_5: []
            }
        },
        mounted: function () {
            this.loadList(3);
        },
        methods: {
            loadList: function (status) {
                $.showPreloader()
                $.get('/api/ship/order_list', {status: status}, function (ret) {
                    $.hidePreloader()
                    if (status == 3) {

                        vm.list_3 = ret.msg;

                    } else if (status == 4) {
                        vm.list_4 = ret.msg;
                    } else {

                        vm.list_5 = ret.msg;
                    }
                })
            },
            doit: function (id) {
                $.showPreloader("正在抢单中")
                $.post('/api/ship/grab?order_id=' + id, function (ret) {

                    $.hidePreloader()
                    $.alert(ret.msg, function () {
                        location.reload()

                    })

                })
            },
            songdao: function (id) {
                $.prompt('请向收货人询问收货密码', '收货验证',
                    function (value) {
                        if (value) {
                            $.post('/api/ship/confirm', {
                                order_id: id,
                                verify_code: value
                            }, function (ret) {
                                $.alert(ret.msg, function () {
                                    if (ret.code > 0) {
                                        location.reload()
                                    }
                                })
                            })
                        }
                    }
                );
            },
            path: function (from, to) {
                console.log(from)
                console.log(to)
                $.popup('.popup-path');

                window.map = new AMap.Map("path-map", {
                    resizeEnable: true,
                    center: [from.Lon, from.Lat],//地图中心点
                    zoom: 13 //地图显示的缩放级别
                });
                //骑行导航
                window.riding = new AMap.Riding({
                    map: window.map,
                    panel: "panel"
                });
                //根据起终点坐标规划骑行路线
                window.riding.search([from.Lon, from.Lat], [to.Lon, to.Lat]);

            }
        }
    })

    $(function () {
        $("#path-map,#container").height($(window).height() - 48)
    })

</script>

{/block}